<template>
  <div class="app">
    <h5>名称：</h5>
    <el-input v-model="name" placeholder="请输入名称"></el-input>
    <h5>账号：</h5>
    <el-input v-model="username" placeholder="请输入手机"></el-input>
    <div class="box"></div>
    <h5>密码：</h5>
    <el-input v-model="paswordOne" placeholder="请输入密码"></el-input>
    <div class="box"></div>

    <el-input v-model="paswordTwo" placeholder="请输入密码"></el-input>
    <div class="box"></div>

    <el-button @click="reg" :loading="flg" class="btClass">注册</el-button>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data() {
    return {
      username: "3305786030@qq.com",
      paswordOne: "zhou24272592",
      paswordTwo: "zhou24272592",
      name:"测试",
      flg: false,
      getVerText: "获取验证码",
      codeFlg: false
    };
  },
  methods: {
    async reg() {
       this.flg = true;
      if (
        this.username.indexOf("@") != -1 ||
        this.username.indexOf(".") != -1
      ) {
        if (!this.IFemail(this.username)) return;
      } else {
        if (!this.IFphone(this.username)) return;
      }
      if (!this.IFequal(this.paswordOne, this.paswordTwo)) return;
      if (!this.ISnull(this.checkCode)) return;
      if (this.checkCode.replace(/\s+/g, "").length != 4) {
        this.msgbox("请输入4位验证码", 2);
        return true;
      }

      await this.$api.userAPI
        .register({ username:this.username, password: this.paswordOne,name:this.name })
        .then(res => {
          console.log(res.data)
        })
        .catch(err => {
          localStorage.setItem("token", null);
        });

      this.flg = false;
    },
  },
  components: {}
};
</script>

<style scoped >
.getyzm {
  margin-bottom: 10px;
  width: 100%;
}
.box {
  margin-top: 10px;
}
</style>
